<template>
  <view @click="handleClick">
    <view class="search-container" :style="{'background-color': bgcolor}">
      <div class="search-box" :style="{'border-radius': radios + 'px'}">
        <uni-icons type="search" size="16"></uni-icons>
        <text class="placeholder">搜索</text>
      </div>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    props: {
      // 背景色
      bgcolor:{
        type: String,
        default: '#C50000'
      },
      // 圆角
      radios:{
        tyoe: Number,
        default: '15'
      }
    },
    methods:{
      handleClick() {
        this.$emit('click')
      }
    }
  }
</script>
<style lang="scss">
  .search-container{
    height: 50px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    .search-box{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-color: #fff;
      height: 30px;
      .placeholder{
        font-size: 14px;
        margin-left: 5px;
      }
    }
  }
</style>